<template>
	<el-form class="loginbox" :model="formdata" :rules="myrules" ref="loginform">
		<h3 style="text-align: center;">扬工院智慧停车管理平台系统</h3>
		<el-form-item prop="username">
			<el-input type="text" placeholder="请输入用户名" v-model="formdata.username"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" placeholder="请输入密码" v-model="formdata.password"></el-input>
		</el-form-item>
		
		<el-row>
			<el-col span="16">
				<el-form-item prop="code">
					<el-input type="text" placeholder="请输入验证码" v-model="formdata.code"></el-input>
				</el-form-item>
			</el-col>
			<el-col span="8">
				<el-image style="width: 120px; height: 40px;" :src="url" @click.native="refreshcode()"></el-image>
			</el-col>
		</el-row>		
		<el-form-item>
			<el-button type="primary" style="width: 100%;" @click="logincheck()" :loading="isloading">登录</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import {getcode} from '../api.js'
	import {requestlogin} from '../api.js'
	export default
	{
		data() {
			return {
				image:"",
				enCode:"",
				url:"",
				formdata:{
					username:"",
					password:"",
					code:""
				},
				myrules:{
					username:[{required:true,message:'请输入账号',trigger:'blur'}],
					password:[{required:true,message:'请输入密码',trigger:'blur'}],
					code:[{required:true,message:'请输入验证码',trigger:'blur'}]
					
				},
				isloading:false
				
			}
		},
		
		mounted() {
			this.refreshcode();
		},
		
		methods: {
			
			logincheck()
			{
				console.log("用户名："+this.formdata.username);
				console.log("密码："+this.formdata.password);
				console.log("验证码："+this.formdata.code);
				this.$refs.loginform.validate((valid)=>{
					
					if(valid)
					{
						this.isloading=true
						let params={
							userName:this.formdata.username,
							password:this.formdata.password,
							code:this.formdata.code,
							enCode:this.enCode,
							image:this.image	
						}
						requestlogin(params).then((res)=>{
							let result = res.data;
							this.isloading=false;
							if(result.status==0)
							{
								console.log("登录成功");
								this.$message({
									message:"登录成功",
									type:"success"
								})
								sessionStorage.setItem("user",JSON.stringify(result.data));
								this.$router.push({path:'/userlist'});
							}
							else
							{
								console.log("登录失败，错误的信息是"+result.msg);
								this.$message({
									message:result.msg,
									type:"error"
								})
							}
							this.refreshcode();
						}).catch((error)=>{
							this.isloading=false;
							this.$message({
								message:"网络异常",
								type:"error"
							})
						})
					}
					else
					{
						
					}
				})
				
			},
			refreshcode() {
				getcode().then((res)=>{
					let result = res.data;
					console.log(result);
					this.enCode=result.data.enCode;
					this.image=result.data.image;
					this.url="data:image/jpeg;base64,"+this.image;
				})
			}
		},
	}
	
</script>

<style>
	.loginbox{
		width: 350px;
		margin: 180px auto;
		border: 1px solid #EAEAEA;
		padding: 35px;
		background-color: #FFFFFF;
		border-radius: 5px;
		box-shadow: 0 0 25px #C6C6C6;
		
		
	}
</style>
